<template>
  <div>
    <div class="mui-card">
      <!--内容区-->
      <div class="mui-card-content">
        <swiper :imgList="this.goodsInfo.album"></swiper>
      </div>
    </div>
    <div class="mui-card ">
      <!--页眉，放置标题-->
      <div class="mui-card-header">{{goodsInfo.name}}</div>
      <!--内容区-->
      <div class="mui-card-content">
        <div class="price">定价: <span>￥{{goodsInfo.price}}</span></div>
        <div class="buy">
          购买数量
          <numbox @count="countChange" :max="goodsInfo.num" initCount="1" :goodsid="goodsInfo.id"></numbox>
        </div>
        <div class="btn">
          <button @click="buy" class="mui-btn mui-btn-primary">立即购买</button>
          <button @click="addCart" class="mui-btn mui-btn-danger">加入购物车</button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">商品参数</div>
      <!--内容区-->
      <div class="mui-card-content">
        <p>商品卖点：{{goodsInfo.sell_point}}</p>
        <p>库存情况：{{goodsInfo.num}}件</p>
        <p>上架时间：{{goodsInfo.create_time}}</p>
      </div>
      <!--页脚，放置补充信息或支持的操作-->
      <div class="mui-card-footer">商品详情</div>
      <div>
        <div class="content" v-html="goodsInfo.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from '../../components/swiper'
import numbox from '../../components/numbox'

export default {
  props: ['id'],
  components: {swiper, numbox},
  data() {
    return {
      goodsId: -1,
      goodsInfo: [],
      selectedCount: 1, // 购买的数量
      ballFlag: false
    }
  },
  created() {
    this.getGoodsInfo()
  },
  mounted() {
    // Numbox数字框需要手动初始化
    // mui(Selector).numbox()
  },
  methods: {
    // 根据商品编号获取对应的商品详情
    getGoodsInfo() {
      this.goodsId = this.$route.params.id
      this.$http.get('goodsinfo', {params: {id: this.goodsId}}).then(res => {
        console.log(res.data.data);
        if (res.data.code === 1) {
          this.goodsInfo = res.data.data
        } else {
          this.$toast('商品详情获取失败')
        }
      })
    },
    // 获取用户选中了多少商品
    countChange(val) {
      this.selectedCount = val.count;
    },
    // 立即购买
    buy() {
      // 将当前的商品和购买的数量 添加到vuex的buy数组中
      var goods = {
        id: this.$route.params.id,
        count: this.selectedCount,
        selected: true
      }
      this.$store.commit('shopcart/setBuy', goods)
      // 跳转到下订单页面
      this.$router.push({name: 'order_create'})
    },
    // 加入购物车
    addCart() {
      // 是否开启小球动画
      this.ballFlag = !this.ballFlag
      this.$store.commit('shopcart/addShopcart', {
        id: parseInt(this.goodsId),
        count: this.selectedCount,
        selected: true
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.mui-card-content {
  text-align: center;
  font-size: 14px;
  color: #999;
  .price {
    margin-top: 10px;
    span {
      color: crimson;
      font-weight: 700;
    }
  }
  .mui-numbox {
    margin-left: 10px;
    margin-top: 10px;
  }
  .btn {
    .mui-btn {
      margin: 10px 5px;
    }
  }
}
</style>